<template>
  <div>
      <!-- 我的信息 -->
     <div class="my-wrap">
         <!-- 头像 -->
         <div class="my-img">
                <img src="https://img03.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-1e16d8c0bc48a98cc6ba4e41d4b88a44.jpg" alt="">
                <div>
                    <p>我是强子刚出来</p>
                    <p>178****3611</p>
                </div>
         </div>
         <!-- 收藏 -->
         <div class="my-collection">
             <div>
                 <p>收藏夹</p>
                 <p>190</p>
             </div>
             <div>
                 <p>关注店铺</p>
                 <p>37</p>
             </div>
             <div>
                 <p>足迹</p>
                 <p>99</p>
             </div>
             <div>
                 <p>卡券</p>
                 <p>2</p>
             </div>
         </div>
     </div>
     <!-- 设置我的订单 -->
         <div class="my-setup">
             <!-- 我的订单 -->
            <div class="order">
                <h3 class="h3">我的订单</h3>
                <div>
                    <van-grid>
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                        <van-grid-item icon="photo-o" text="文字" />
                    </van-grid>
                </div>
            </div>
         </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';

Vue.use(Grid).use(GridItem);
export default {

}
</script>

<style lang="stylus" scoped>
.my-wrap
    width 100%
    height 2.07rem
    background-color #c1ab96
    padding-top 0.35rem
    .my-img
        width 100%
        height 0.6rem
        display flex
        margin-bottom 0.23rem
        padding 0 0.12rem
        img
            width 0.6rem
            height 0.6rem
            display inline-block
            border-radius 50%
        div
            flex 1
            height 0.6rem
            >p:first-child
                width 100%
                height 0.35rem
                line-height 0.35rem
                margin-left 0.12rem
                color #fff
                font-weight bolder
                font-size 0.21rem
            >p:last-child
                color #fff    
                margin-left 0.12rem
                font-size 0.11rem
    .my-collection
          width 100%
          height 0.5rem
          color #fff
          display flex
          >div
            width 25%
            text-align center
            >p:first-child
                margin-bottom 0.07rem
.my-setup
    width 100%
    height 3.55rem
    background-color #bfa
    margin-top -0.25rem
    border-top-left-radius 0.2rem
    border-top-right-radius 0.2rem
    padding 0 0.18rem
    .order
        height 1.2rem
        >.h3
            height 0.45rem
            line-height 0.45rem
            font-weight bolder
            font-size 0.18rem
        >div
            height 0.87rem
            width 100%
            background-color #fff


            
        
</style>